<template>
  <div class="footer">
    <!---el-radio 本身是没有 click 事件， click 事件radio 标签原生的时间
    参见官方文档： https://cn.vuejs.org/v2/guide/components.html#组件间的循环引用Circular-References-Between-Components
    给组件绑定原生事件
    有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：-->
    <el-radio class="radio" @click.native="setFilter('all')" v-model="radio" label="all">All</el-radio>
    <el-radio class="radio" @click.native="setFilter('active')" v-model="radio" label="active">Active</el-radio>
    <el-radio class="radio" @click.native="setFilter('completed')" v-model="radio" label="completed">Completed</el-radio>
  </div>
</template>

<script type="text/javascript">
export default{
  name: 'todo-footer',
  props: ['filter'],
  data(){
    return{
      radio: this.filter
    }
  },
  created(){
    console.log('--todoFooter--->>>' + this.filter)
  },
  methods : {
    setFilter: function(filter){
      // 分发内容， 事件名称： set-filter
      this.$emit('set-filter', filter)
    }
  }
}

</script>

<style>
ul li{
    list-style-type: none
}
.footer{
    border-top:1px solid #eee;
    padding-top: 10px;
}
</style>
